<template>
	<view>
		<view class="roll">
			<view class="roll_con" id="box">
				<view class="roll_list" id='item' :class="ishow?'':'te'" v-for="(item,index) in rollList" :key="index" :animation="animationData">
					<view class="roll_dot"></view>
					<view class="roll_title">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					rollList:[
						{title:'11111111111111111111111111111111111'},
						{title:'22222222222222222222222222222222222'},
						{title:'33333333333333333333333333333333333'},
						{title:'44444444444444444444444444444444444'},
						{title:'55555555555555555555555555555555555'},
						{title:'66666666666666666666666666666666666'},
						{title:'77777777777777777777777777777777777'},
						{title:'88888888888888888888888888888888888'}
					],
					animationData:{},
					top:'',
					ishow:false
				}
			},
			onReady() {
				let animation = uni.createAnimation({
					transformOrigin: "50% 50%",
					duration:1000,
					timingFunction: "linear",
					delay: 0
				})
				let query = uni.createSelectorQuery().in(this);
				query.select('#box').boundingClientRect(data => {

					this.top = data.top+30
					// 这个 
				}).exec();
				
				this.animation = animation;
				this.animations()
			},
			onLoad() {
				
			},
			methods: {
				// 滚动
				animations(){
					let i = -1;
					let j = 0;
					let sum = this.rollList.length;
					setInterval(()=>{
						if(i == sum){
							i = 0;
						}
						setTimeout(()=>{
							let arr = this.rollList.splice(i,1)[0];
							this.rollList.push(arr);
							this.rollList.splice(i,0,arr);
						},500)
						i++;
						j++;
						this.animation.translateY(-24 * j).step()
						this.animationData = this.animation.export();
						let query = uni.createSelectorQuery().in(this);
						query.select('#item').boundingClientRect(data => {
							console.log('元素距离顶部的距离' + data.top)
							if(this.top<=data.top){
								this.ishow=true
							}else{
								this.ishow = false
							}
							// 这个 
						}).exec();
					},1000)
				}
			}
		}
</script>

<style lang="scss" scoped>
	.roll{
		padding:32rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.roll_con{
		height:260rpx;
		overflow:hidden;
	}
	.roll_list{
		display:flex;
		align-items:center;
		margin-bottom:24rpx;
	}
	.roll_dot{
		width:8rpx;
		height:8rpx;
		background: #F67001;
		border-radius:8rpx;
	}
	.roll_title{
		width:calc(100% - 24rpx);
		font-size:28rpx;
		line-height:28rpx;
		color: #707070;
		margin-left:16rpx;
		display:inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	@keyframes mymove
	{
		from {left:0px;}
		to {left:200px;}
	}
	@-webkit-keyframes mymove /* Safari and Chrome */
	{
		from {left:0px;}
		to {left:200px;}
    }
	.te{
		animation-name:mymove;
			animation-duration:5s;
			/* Safari and Chrome */
			-webkit-animation-name:mymove;
			-webkit-animation-duration:5s;

		
	}

</style>